<!--
 * @Author: lsjweiyi lsjweiyi
 * @Date: 2023-04-09 15:55:11
 * @LastEditors: lsjweiyi 759209794@qq.com
 * @LastEditTime: 2024-04-20 16:22:21
 * @FilePath: \web-ssg\pages\image\IdcardChangeColor.vue
 * @Description: 去除摩尔纹
-->
<template>
    <div class="title">{{ toolIMsg.name }}</div>
    <div class="myBody">
        <TwoImgCompare :bottom-img="upLoadImg" :upper-img="newImgURL"></TwoImgCompare>
        <div class="buttonGroup">
            <div style="display: inline-flex;width: 100%;">
                <SingleFileUpload @select-file="fileChange" @upload-file="myUpload" :loading="loading">
                </SingleFileUpload>
            </div>
            <div style="display: inline-flex;width: 100%;"> <pay-and-down v-model:task-id="taskId"
                    :tool-name="toolIMsg.name" :tool-id="toolIMsg.toolId"></pay-and-down>
                <HistoryDown :tool-name="toolIMsg.name" :tool-id="toolIMsg.toolId"></HistoryDown>
            </div>
        </div>
        <div class="insideCard">
            <div style="color: red; margin-bottom: 10px">支持格式：jpg/jpeg、png、bmp</div>
            <div style="color: red; margin-bottom: 10px">{{ "限制大小：" + maxSize + "KB" }}</div>
            <div>{{ toolIMsg.description }}</div>
            <div style="font-size: 16px; margin-top: 10px">PS：本站不收集任何个人信息，请放心使用！上传的图片在服务器约保存24小时后自动删除</div>
        </div>
    </div>
</template>
<script lang="ts" setup>
import "@/assets/insideBody.scss";
const toolIMsg = getImageMenuItem("removeMoire");
const maxSize = 3070; // 上传图片限制的大小，单位KB
useHead({
    title: toolIMsg.name,
});
useSeoMeta({
    description: toolIMsg.description,
});

let taskId = ref("");
const upLoadImg = ref<string | undefined>("/images/region2.jpg"); // 处理前的图片链接
const newImgURL = ref<string | undefined>("/images/removeMoire1.jpg"); // 处理后的图片链接

const loading = ref(false); // 加载状态
// 自定义上传图像的方法覆盖默认方法
const myUpload = (file: File) => {
    loading.value = true; // 设置加载状态为true，显示加载状态
    // 后端接口
    imgEffectEnhance(file, toolIMsg.toolId as number).then((res) => {
        responseDeal(res, "去除摩尔纹失败！", taskId, undefined, newImgURL);
        loading.value = false; // 设置加载状态为false，隐藏加载状态
    });
};

/**
 * @description: 上传文件按钮回调函数
 * @param {*} file
 * @return {*}
 */
const fileChange = (file: File, fn: (result: boolean) => void) => {
    checkFile(file, maxSize, [15, 4096]).then((res) => {
        if (res) {
            upLoadImg.value = res.base64;
            newImgURL.value = undefined;
            fn(true);
            taskId.value = ""
        } else {
            fn(false);
        }
    });
};
</script>
<style  scoped>
.title::after {
    content: '去除摩尔纹';
    position: absolute;
    left: 0;
    color: black;
    transform: translate(116px, 6px) scaleX(1.01) scaleY(0.5) skew(50deg);
    z-index: -1;
    filter: blur(1px);
    mask: linear-gradient(transparent, black);
}
</style>